<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            font-size: 1.5em
        }
        input, button {
            min-width: 72px;
            min-height: 36px;
            border: 1px solid grey;
        }
        label, input, button {
            display: block;
        }
        input {
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
<h1>使用 Chrome DevTools 调试 JavaScript</h1>
<label for="num1">数字 1</label>
<input placeholder="数字 1" id="num1">
<label for="num2">数字 2</label>
<input placeholder="数字 2" id="num2">
<button>数字 1和数字 2相加 </button>
<p></p>

<script>
    function onClick() {
        if (inputsAreEmpty()) {
            label.textContent = 'Error: 有一个或者两个文本框值为空';
            return;
        }
        updateLabel();
    }
    function inputsAreEmpty() {
        if (getNumber1() === '' || getNumber2() === '') {
            return true;
        } else {
            return false;
        }
    }
    function updateLabel() {
        var addend1 = getNumber1();
        var addend2 = getNumber2();
        var sum = addend1 + addend2;
        label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
    }
    function getNumber1() {
        return inputs[0].value;
    }
    function getNumber2() {
        return inputs[1].value;
    }

    var inputs = document.querySelectorAll('input');
    var label = document.querySelector('p');
    var button = document.querySelector('button');
    button.addEventListener('click', onClick);

</script>
</body>
</html>